<template>
	<view class="hl-popup" ref="popup">
		<view class="calendar flex flex-dir-c" @tap.stop="">
			<view class="font-30" style="box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);">
				<view class="flex flex-jc-c" v-if="startDate&&endDate">
					{{startDate.month>9?startDate.month:`0${startDate.month}`}}月{{startDate.day>9?startDate.day:`0${startDate.day}`}}
					<text v-if="todayTimestamp == startDate.timesTamp">今天</text>
					<text v-else-if="todayTimestamp + 86400000 == startDate.timesTamp">明天</text>
					<text v-else>{{filterWeek(startDate.weak)}}</text>
					<view
						style="padding: 0rpx 8rpx;border-radius: 17rpx;border: 1rpx solid #979797;margin: 0 20rpx;font-size: 24rpx;">
						{{diff}}晚
					</view>

					{{endDate.month>9?endDate.month:`0${endDate.month}`}}月{{endDate.day>9?endDate.day:`0${endDate.day}`}}
					<text v-if="todayTimestamp == endDate.timesTamp">今天</text>
					<text v-else-if="todayTimestamp + 86400000 == endDate.timesTamp">明天</text>
					<text v-else>{{filterWeek(endDate.weak)}}</text>
				</view>
				<view class="weekdays-view">
					<view class="weekday" v-for="(weak,index) in weekDays" :key="index">
						<view class="block-item">
							{{weak}}
						</view>
					</view>
				</view>
			</view>
			<scroll-view class="list-view f1" style="height: 80%;" scroll-y :scroll-into-view="'item' + preMonthCount">
				<view class="month-item" v-for="(item,index) in dataArray" :key="index" :id="'item' + index">
					<view class="topHandleView">
						<text>{{item.time}}</text>
					</view>
					<!-- this.todayTimestamp -->
					<view class="monthdays-view">
						<view class="monthday" v-for="(dayItem,index) in item.days" :key="index">
							<view class="block-item"
								:class="{'active': activeClass(dayItem.timesTamp),'range': rangeClass(dayItem.timesTamp),'ban': banClass(dayItem.timesTamp)}"
								@click="didSelectorDate" :data-model="dayItem">
								<!-- <text class="sign" v-if="dayItem.status == 'today'">今日</text> -->
								<text class="sign"
									v-if="startDate!= null && dayItem.timesTamp == startDate.timesTamp">入住</text>
								<text class="sign"
									v-else-if="endDate!= null && dayItem.timesTamp == endDate.timesTamp">离店</text>
								{{dayItem.day}}
							</view>
						</view>
					</view>
				</view>

				<view style="height: 250rpx;"></view>
			</scroll-view>
			<view class="shade-bg-view">
				<button class="certain-btn" @click="certainBtnAction">确认预订（{{diff}}晚）</button>
			</view>

			<view class="safe-view"></view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			preMonthCount: { //默认起始月份
				type: Number,
				default: 0
			},
			affterMonthCount: {
				type: Number,
				default: 12
			},
			min: {
				type: Number,
				default: 1
			}
		},

		data() {
			return {
				word: 'word',
				showPopup: false,
				currentMonthItem: null,
				startDate: null,
				endDate: null,
				todayTimestamp: null,
				weekDays: [
					"日", "一", "二", "三", "四", "五", "六",
				],

				dataArray: [],
				diff: 0
			}
		},
		computed: {
			selectorDate() {
				if (this.startDate != null && this.endDate != null) {
					return this.startDate.date + '至' + this.endDate.date
				} else {
					return '选择日期范围'
				}

			},
		},

		mounted() {
			this.setBaseDateData()
		},

		methods: {
			filterWeek(n) {
				let week = ''
				switch (n) {
					case 1:
						week = '一'
						break
					case 2:
						week = '二'
						break
					case 3:
						week = '三'
						break
					case 4:
						week = '四'
						break
					case 5:
						week = '五'
						break
					case 6:
						week = '六'
						break
					case 7:
						week = '天'
						break
				}
				return '星期' + week
			},
			activeClass: function(timesTamp) {
				if (this.startDate != null && this.startDate.timesTamp == timesTamp) {
					return true
				}
				if (this.endDate != null && this.endDate.timesTamp == timesTamp) {
					return true
				}
				return false
			},

			rangeClass: function(timesTamp) {
				if (this.startDate != null && this.endDate != null) {
					return this.startDate.timesTamp < timesTamp && this.endDate.timesTamp > timesTamp
				}
				return false
			},
			banClass: function(timesTamp) {
				if (timesTamp < this.todayTimestamp) {
					return true
				}
				return false

			},

			setBaseDateData: function() {
				let todayDt = new Date()
				let today_y = todayDt.getFullYear()
				let today_m = todayDt.getMonth() + 1
				let today_d = todayDt.getDate()
				this.todayTimestamp = new Date(today_y, today_m - 1, today_d).valueOf()
				this.currentMonthItem = this.getCurrentMonthDayArray(today_y, today_m, this.todayTimestamp)

				this.dataArray.push(this.currentMonthItem)
				let affterYear = today_y
				for (let index = 1; index <= this.affterMonthCount; index++) {
					let afferMonth = (today_m + index) % 12 == 0 ? 12 : (today_m + index) % 12
					if (afferMonth == 1) {
						affterYear += 1
					}
					//console.log('year:' + affterYear + '========='+ 'month:' + afferMonth)
					let monthItem = this.getCurrentMonthDayArray(affterYear, afferMonth, this.todayTimestamp)
					this.dataArray.push(monthItem)
				}

				let preYear = today_y
				let preMonth = today_m
				for (let index = 1; index <= this.preMonthCount; index++) {
					preMonth = preMonth - 1
					if (preMonth == 0) {
						preMonth = 12
						preYear -= 1
					}
					let monthItem = this.getCurrentMonthDayArray(preYear, preMonth, this.todayTimestamp)
					this.dataArray.splice(0, 0, monthItem)
				}
			},

			getCurrentMonthDayArray: function(y, m, todayTimestamp, ) {
				let days = new Date(y, m, 0).getDate()
				var dataArray = []
				for (let day = 1; day <= days; day++) {
					let dt = new Date(y, m - 1, day);
					let timesTamp = dt.valueOf()
					let wk = dt.getDay()
					var status = ""
					var enabled = true
					if (todayTimestamp > timesTamp) {
						status = 'past'
					} else if (todayTimestamp == timesTamp) {
						status = 'today'
					} else {
						status = 'future'
					}
					dataArray.push({
						day: day,
						month: m,
						year: y,
						enabled: enabled,
						weak: wk,
						status: status,
						timesTamp: timesTamp,
						date: y + '-' + m + '-' + day
					})
				}

				let model = dataArray[0]
				for (let begin = model.weak - 1; begin >= 0; begin--) {
					let newModel = {
						day: "",
						enabled: false,
						month: model.month,
						year: model.year,
						weak: begin,
						timesTamp: -1
					}
					dataArray.splice(0, 0, newModel)
				}
				return {
					days: dataArray,
					month: m,
					year: y,
					time: y + "年" + m + '月'
				}
			},


			openPopup: function() {
				this.showPopup = true
			},

			closedPopup: function() {
				this.showPopup = false
			},

			didSelectorDate: function(e) {
				let model = e.currentTarget.dataset.model
				if (model.timesTamp < this.todayTimestamp) return
				if (model.enabled == true) {
					if (this.startDate == null) {
						this.startDate = model
					} else {
						if (this.endDate == null) {
							if (model.timesTamp < this.startDate.timesTamp) {
								this.endDate = this.startDate
								this.startDate = model
							} else {
								this.endDate = model
							}
						} else {
							if (model.timesTamp < this.startDate.timesTamp) {
								this.startDate = model
							} else if (model.timesTamp == this.startDate.timesTamp) {
								this.endDate = model
							} else if (model.timesTamp > this.startDate.timesTamp && model.timesTamp < this.endDate
								.timesTamp) {
								this.startDate = model
							} else if (model.timesTamp > this.endDate.timesTamp) {
								this.endDate = model
							} else if (model.timesTamp == this.endDate.timesTamp) {
								this.startDate = model
							}
						}
					}
				}
				if (this.endDate) {
					let dt = this.endDate.timesTamp - this.startDate.timesTamp
					this.diff = dt / 86400000
				}
			},

			certainBtnAction: function() {
				if (this.startDate == null) {
					uni.showToast({
						icon: 'none',
						title: '请选择入住时间'
					})
					return
				}

				if (this.endDate == null) {
					uni.showToast({
						icon: 'none',
						title: '请选择离店时间',
					})
					return
				}
				if (this.todayTimestamp == this.startDate.timesTamp) {
					this.startDate.weekText = '今天'
				} else if ((this.todayTimestamp + 86400000) == this.startDate.timesTamp) {
					this.startDate.weekText = '明天'
				} else {
					this.startDate.weekText = this.filterWeek(this.startDate.weak)
				}
				if (this.todayTimestamp == this.endDate.timesTamp) {
					this.endDate.weekText = '今天'
				} else if ((this.todayTimestamp + 86400000) == this.endDate.timesTamp) {
					this.endDate.weekText = '明天'
				} else {
					this.endDate.weekText = this.filterWeek(this.endDate.weak)
				}
				if(this.endDate.weak == 0) this.endDate.weekText = '周末'
				if(this.startDate.weak == 0) this.startDate.weekText = '周末'
				let startDate = this.startDate.year+`-${this.startDate.month>10?this.startDate.month:`0${this.startDate.month}`}-${this.startDate.day>10?this.startDate.day:`0${this.startDate.day}`}`
				let endDate = this.endDate.year+`-${this.endDate.month>10?this.endDate.month:`0${this.endDate.month}`}-${this.endDate.day>10?this.endDate.day:`0${this.endDate.day}`}`
				if(this.diff < this.min) return uni.showToast({
					title: `最低预定${this.min}晚`,
					icon: 'none'
				})
				this.$emit("selectorDate", {
					start: {...this.startDate,date: startDate},
					end: {...this.endDate,date: endDate},
					diff: this.diff
				})
				this.closedPopup()
			}
		}
	}
</script>

<style lang="scss">
	$hl-calendar-primary: #00B29A;
	$sign-color : #FF0000;
	$range-bg: #ECF5F3;

	button::after {
		border: none;
	}

	.hl-popup {
		height: 100%;
	}

	.safe-view {
		height: env(safe-area-inset-bottom);
	}


	.calendar {
		height: 100%;
		display: flex;
		flex-direction: column;
		width: 100%;
		background-color: #FFF;

		.list-view {
			width: 100%;
		}

		.shade-bg-view {
			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 99;
			height: 196rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 0rpx 2rpx rgba(153, 153, 153, 0.5);

			.certain-btn {
				height: 44px;
				background-color: $hl-calendar-primary;
				color: #FFF;
				border-radius: 0;
				font-size: 16px;
				margin: 49rpx 30rpx 0 30rpx;

			}
		}

	}

	.topHandleView {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		padding: 16px 0;
		font-size: 16px;
	}

	.weekdays-view,
	.monthdays-view {
		display: grid;
		width: 100%;
		grid-template-columns: repeat(7, 1fr);

		.weekday,
		.monthday {
			display: flex;
			position: relative;
			padding-bottom: 100%;
			height: 0;
			overflow: hidden;
			margin-bottom: 10rpx;

			.block-item {
				display: flex;
				position: absolute;
				width: 100%;
				height: 100%;
				justify-content: center;
				align-items: center;
				font-size: 16px;


				.sign {
					position: absolute;
					color: #fff;
					top: 0;
					font-size: 10px;
				}

				&.active {
					background-color: #24C588;
					color: #fff;
					border-radius: 12px;
					font-weight: bold;
				}

				&.range {
					background-color: #E7FBF2;
					color: #333;
					border-radius: 4px;
					font-weight: bold;
				}

				&.ban {
					color: #999999;
				}
			}
		}
	}
</style>